<template>
	<!-- 视频卡 -->
	<div class="video" @mouseenter="inner($event)" @mouseleave="outer" @mousemove="moveing($event)" ref="video" @click="$emit('handler', video)">
		
		<!-- 视频图片 -->
		<div class="imgbox"><img :src="video.cover" /></div>
		
		<!-- 进度条 -->
		<div class="progress" v-if="config.progress"><span :style="{width: progress+'%'}"></span></div>
		
		<!-- 播放次数,点赞 -->
		<Times v-if="config.btn" :times="times"/>
		
		<!-- 精选标签 -->
		<Badge v-if="badge.title" :badge="badge"/>
		
		<!-- 弹幕组件 -->
		<Bullet v-if="showBullet" :id="video.id" :opa="!flag" @close="hasBullet=false" ref="bullet"/>
		
		<!-- 稍后再看 -->
		<Later/>
		
	</div>
</template>

<script>
import Times from '@/components/Public/Video/Times'
import Badge from '@/components/Public/Video/Badge'
import Bullet from '@/components/Public/Video/Bullet'
import Later from '@/components/Public/Video/Later'

export default{
	data(){
		return{
			// hover进度条
			progress: 0,
			// hover起始点
			start: 0,
			// 屏幕上是否还有弹幕
			hasBullet: false,
			// 是否显示进度条，弹幕，控制透明度
			flag: false
		}
	},
	props:{
		// 视频数据
		video:{
			type: Object,
			required: true
		},
		// 视频配置
		config:{
			type: Object,
			default: () => ({
				btn: true,
				progress: false,
				bullet: false
			})
		}
	},
	computed:{
		// 视频的宽度
		width(){
			return this.$refs.video.offsetWidth;
		},
		// 根据是否拥有弹幕组件和是否还有弹幕，显示隐藏弹幕
		showBullet(){
			return this.config.bullet && this.hasBullet;
		},
		// 播放次数与点赞次数
		times(){
			return{
				view: this.video.view_count,
				like: this.video.like_count
			}
		},
		// 精选标记
		badge(){
			return{
				title: this.video.badge_title,
				bg: this.video.badge_background
			}
		}
	},
	methods:{
		// 跳转，暂时直接跳转
		fromTo(){
			console.log(this.video)
			window.open('https://www.bilibili.com/video/'+this.video.bvid)
		},
		// 移入显示播放预览进度，获取弹幕数据，记录移入的位置
		inner(event){
			this.flag = true;
			if(this.config.progress){
				this.start = event.offsetX;
				this.hasBullet = true;
			}
			// 获取弹幕并将弹幕传到弹幕组件
			if(this.config.bullet){
				this.$nextTick(()=>{
					this.$refs.bullet.getData();
				})
			}
			
		},
		// 移出将进度归零
		outer(){
			this.flag = false;
			this.progress = 0;
		},
		// 移动过程中，不断设置进度
		moveing(event){
			if(!this.config.progress) return;
			this.progress = parseInt((event.offsetX - this.start)/this.width * 80);
		}
	},
	components:{
		Times,
		Badge,
		Bullet,
		Later
	}
}
</script>

<style scoped lang="less">
.video{
	position: relative;
	display: flex;
	align-items: center;
	width: 170px;
	height: 96px;
	color: #fff;
	cursor: pointer;
	user-select: none;
	&:hover{
		.progress{
			opacity: 1;
		}
		.btns{
			opacity: 0;
		}
		.play{
			opacity: 1;
		}
	}
	&::before{
		z-index: 1;
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 58px;
		width: 100%;
		border-radius: 0 0 2px 2px;
		background: linear-gradient(180deg,transparent,rgba(0,0,0,.6));
	}
	.imgbox{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 2px;
		overflow: hidden;
	}
	.progress{
		position: absolute;
		left: 0;
		top: 0;
		width: calc(100% - 16px);
		height: 2.5px;
		margin: 4px 8px;
		background-color: #444;
		opacity: 0;
		transition: opacity .3s;
		span{
			display: block;
			height: 100%;
			background-color: #fff;
			transition: width .2s;
		}
	}
}
</style>
